import React, { useImperativeHandle } from "react";
import {Form, Input, Row, Col, TreeSelect, Select, Radio} from 'antd';

import ProBox from "vendor/components/pro-box";
import { CreateOrEditActionRef } from "vendor/components/pro-table-native";

import { useCreateUser } from './useCreateUser';
import {EnumSexTypeList} from "../constants";
import {EnumStatus} from "@/components/app/commonSystemSetting/constants";

const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
};

const CreateOrEditContent = React.forwardRef<CreateOrEditActionRef, {rowKey: string | number, values: any}>((props, actionRef) => {
    const [ form ] = Form.useForm();

    const { loading, initData } = useCreateUser();

    useImperativeHandle(actionRef, () => ({
        getFormData: () => new Promise((resolve, reject) => {
            form.validateFields().then((data) => {
                // 编辑状态时后端需要userName
                if (props.rowKey){
                    resolve({userName: props.values.userName, ...data})
                    return
                }
                resolve(data);
            }).catch((e) => {
                reject(new Error("请检查参数"));
            });
        })
    }));

    return (
        <ProBox loading={loading}>
            <Form
                initialValues={Object.assign({
                    sex: EnumSexTypeList[0].value,
                    status: EnumStatus[0].value,
                },props.values)}
                form={form}
            >
                {!props.rowKey && <Row>
                    <Col span={12}>
                        <Form.Item
                            label="用户名"
                            name="userName"
                            rules={[{ required: true, message: '请填写用户名!' }]}
                            {...layout}
                        >
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[{ required: true, message: '请填写密码!' }]}
                            {...layout}
                        >
                            <Input.Password />
                        </Form.Item>
                    </Col>
                </Row>}

                <Row>
                    <Col span={12}>
                        <Form.Item
                            label="用户昵称"
                            name="nickName"
                            rules={[{ required: true, message: '请填写用户昵称!' }]}
                            {...layout}
                        >
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label="归属组织"
                            name="deptId"
                            rules={[{ required: true, message: '请选择组织!' }]}
                            {...layout}
                        >
                            <TreeSelect
                                treeData={initData.orgTreeSelectData}
                                placeholder="请选择组织"
                            />
                        </Form.Item>
                    </Col>
                </Row>

                <Row>
                    <Col span={12}>
                        <Form.Item
                            label="手机号"
                            name="phonenumber"
                            rules={[
                                // { required: true, message: '请填写手机号!' },
                            ]}
                            {...layout}
                        >
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label="邮箱"
                            name="email"
                            rules={[{
                                type: "email",
                                message: "请输入正确的邮箱地址",
                            }]}
                            {...layout}
                        >
                            <Input />
                        </Form.Item>
                    </Col>
                </Row>

                <Row align={"middle"}>
                    <Col span={12}>
                        <Form.Item
                            label="性别"
                            name="sex"
                            {...layout}
                        >
                            <Select placeholder="请选择">
                                {EnumSexTypeList.map(({label, value}) => (
                                    <Select.Option key={value} value={value}>{label}</Select.Option>
                                ))}
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label="状态"
                            name="status"
                            {...layout}
                        >
                            <Radio.Group>
                                {EnumStatus.map(({label, value}) => (
                                    <Radio key={value} value={value}>{label}</Radio>
                                ))}
                            </Radio.Group>
                        </Form.Item>
                    </Col>
                </Row>

                <Row align={"middle"}>
                    <Col span={12}>
                        <Form.Item
                            label="岗位"
                            name="postIds"
                            {...layout}
                        >
                            <Select
                                mode="multiple"
                                placeholder="请选择"
                            >
                                {initData.sysPostList.map(({label, value}) => (
                                    <Select.Option key={value} value={value}>{label}</Select.Option>
                                ))}
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label="角色"
                            name="roleIds"
                            rules={[{ required: true, message: '角色不能为空' }]}
                            {...layout}
                        >
                            <Select
                                mode="multiple"
                                placeholder="请选择"
                            >
                                {initData.sysRoleList.map(({label, value}) => (
                                    <Select.Option key={value} value={value}>{label}</Select.Option>
                                ))}
                            </Select>
                        </Form.Item>
                    </Col>
                </Row>

                <Row align={"middle"}>
                    <Col span={24}>
                        <Form.Item
                            label="备注"
                            name="remark"
                            rules={[{max: 150, message:'备注信息不能超过150个字！'}]}
                            labelCol={{span: 3}}
                            wrapperCol={{span: 19}}
                        >
                            <Input.TextArea rows={4} placeholder="请输入内容"/>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </ProBox>
    )
});

export default CreateOrEditContent;